<template>
  <!-- <Teleport to="#message"> -->
    <div
      class="alert fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
      :class="classObject"
      role="alert"
      v-if="isVisible"
    >
      <strong>{{ message }} </strong>
      <button type="button" class="close" aria-label="Close" @click="hide">
        <span aria-hidden="true">X</span>
      </button>
    </div>
  <!-- </Teleport> -->
</template>

<script lang="ts">
import { PropType, defineComponent, ref } from "vue";
export type messageType = "success" | "error" | "default";
import useDOMCreate from "@/hooks/useDOMCreate";

export default defineComponent({
  props: {
    type: {
      type: String as PropType<messageType>,
      default: "default",
    },
    message: String,
  },
  //   emits:['close-message'],
  setup(props) {
    // const node = document.createElement("div");
    // node.id = "message";
    // document.body.appendChild(node);
    // useDOMCreate("message");
    const isVisible = ref(true);
    const classObject = {
      "alert-success": props.type === "success",
      "alert-danger": props.type === "error",
      "alert-primary": props.type === "default",
    };
    const hide = () => {
      isVisible.value = false;
      //   context.emit('close-message',true)
    };
    return {
      isVisible,
      classObject,
      hide,
    };
  },
});
</script>

<style scoped></style>
